{extend name='public/alert' /}

{block name="content"}
<style >
    .img-box {
        position: relative;
        overflow: hidden;
        width: 230px;
        height: 150px;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border: 1px #efefed solid;
        color: #76838f;
    }

    .img-box img {
        max-width: 100%;
    }

    .layui-col-md3 {
        padding: 0 10px;
        text-align: center
    }

    .media-body {
        padding: 10px 5px;
        border: 1px solid rgb(231, 231, 235);
    }

    .media-btn {
        margin-top: 10px;
        text-align: center
    }

    .media-desc img {
        width: 100%;
        height: 180px;
    }

    .mdedia-lists-box {
        border-bottom: 1px solid rgb(231, 231, 235);
        display: inline-block;
        padding: 5px 0 5px 0px;
        height: 48px;
        width: 100%;
    }

    .media-img-box img {
        width: 100%;
        height: 48px;
    }

    .media-content {
        position: relative;
        height: 180px;
    }

    .media-content img {
        width: 100%;
        height: 180px;
    }

    .media-desc {

        position: absolute;
        background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
        color: #ffffff;
        width: 100%;
        bottom: 0;
        height: 45px;
        text-align: left;
    }
</style >

<div class="layui-fluid" >
    <div class="layui-card" >

        <div class="layui-card-header" >
            <blockquote class="layui-elem-quote" >
                <div class="LM-table" >
                    <div >
                        <label for="" >{$user.nickname}</label >
                        <div class="layui-input-inline" >
                            <img width="50" src="{$user.headimgurl}" alt="" >
                        </div >
                    </div >
                </div >
            </blockquote >
        </div >
        <div class="layui-card-body" style="padding: 15px;" >

            <form class="layui-form" action="" >
                <input name="material_id" type="hidden" value="" >
                <input name='msg_type' type="hidden" value="text" >
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" >
                    <ul class="layui-tab-title" >
                        <li class="layui-this" >文本内容</li >
                        <li >图片</li >
                        <li >图文</li >
                        <li >视频</li >
                        <li >音频</li >
                    </ul >
                    <div class="layui-tab-content" style="padding: 15px;" >
                        <div class="layui-tab-item layui-show text" >
                            <div class="layui-form-item layui-form-text" >
                                <label class="layui-form-label" >回复内容</label >
                                <div class="layui-input-block" >
                                    <textarea placeholder="请输入内容" class="layui-textarea" name="data" ></textarea >
                                </div >
                            </div >
                        </div >
                        <div class="layui-tab-item image" >
                            <div class="img-box" id="image" >
                                <img src="__WECHAT__/images/add-img.png" alt="" style="height:auto;padding-top:40px" >
                                <div class="bottomBar" >点击选择</div >
                            </div >
                            <div class="layui-row" style="display: none" >
                                {volist name="materialGroup['image']" id="vo"}
                                <div class="layui-col-md3" >
                                    <div class="media-body" >
                                        <div class="media-time" >
                                            发布时间：2019-08-12 : 10:38
                                        </div >
                                        <span style="display: block;" >
                                  <div class="media-content" >
                                        <div class="media-desc" ><p class="media-desc-sp" ></p ></div >
                                        <img class="media-img" width="100%" height="180" src="{$vo.media_url}" >
                                  </div >
                                 </span >
                                        <div >
                                            <ul >
                                            </ul >
                                        </div >
                                        <div class="media-item-type2" >
                                            <div class="layui-btn-group media-btn" >
                                                <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','image')"
                                                   class="layui-btn layui-btn-primary layui-btn-sm" >
                                                    <i class="layui-icon" ></i >选择
                                                </a >
                                            </div >
                                        </div >
                                    </div >

                                </div >
                                {/volist}
                            </div >
                        </div >
                        <div class="layui-tab-item news" >
                            <div class="img-box" id="news" >
                                <img src="__WECHAT__/images/add-img.png" alt="" style="height:auto;padding-top:40px" >
                                <div class="bottomBar" >点击选择</div >
                            </div >
                            <div class="layui-row" style="display: none" >
                                {volist name="materialGroup['news']" id="vo"}

                                <div class="layui-col-md3" >
                                    <div class="media-body" >
                                        <div class="media-time" >
                                            发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                                        </div >
                                        <span style="display: block;" >
                                     <div class="media-content" >
                                         <div class="media-desc" >
                                             <p class="media-desc-sp" >{if isset($vo['item_info'][0]['title'])}{$vo['item_info'][0]['title']}{/if}</p >
                                         </div >
                                            <img class="media-img"
                                                 src="{if isset($vo['item_info'][0]['cover'])}{$vo['item_info'][0]['cover']}{/if}" >
                                      </div >
                                </span >
                                        <!--                                //多图文&ndash;&gt;-->
                                        {if count($vo['item_info'])>1}
                                        <div >
                                            <ul >
                                                {volist name="vo.item_info" id="v" offset='1' }
                                                <li >
                                                    <div class="mdedia-lists-box" >
                                                        <div class="media-title-box layui-col-md9 fl" >
                                                            {$v.title}
                                                        </div >
                                                        <div class="media-img-box layui-col-md3 fr" >
                                                            <img class="media-lists-img" src="{$v.cover}" >
                                                        </div >
                                                    </div >
                                                </li >
                                                {/volist}
                                            </ul >
                                        </div >
                                        {/if}
                                        <div class="media-item-type2" >
                                            <div class="layui-btn-group media-btn" >
                                                <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','news')"
                                                   class="layui-btn layui-btn-primary layui-btn-sm" >
                                                    <i class="layui-icon" ></i >选择
                                                </a >
                                            </div >
                                        </div >
                                    </div >

                                </div >

                                {/volist}
                            </div >
                        </div >
                        <div class="layui-tab-item video" >
                            <div class="img-box" id="video" >
                                <img src="__WECHAT__/images/add-img.png" alt="" style="height:auto;padding-top:40px" >
                                <div class="bottomBar" >点击选择</div >
                            </div >
                            <div class="layui-row" style="display: none" >
                                {volist name="materialGroup['video']" id="vo"}
                                <div class="layui-col-md3" >
                                    <div class="media-body" >
                                        <div class="media-time" >
                                            发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                                        </div >
                                        <span style="display: block;" >
                                     <div class="media-content" >
                                         <div class="media-desc" >
                                             <p class="media-desc-sp" ></p >
                                         </div >
                                         <div style="font-size: 50px;height: 180px;line-height:180px;text-align: center" >
                                             <i class="fa fa-play-circle-o" ></i >
                                         </div >
                                      </div >
                                </span >

                                        <div class="media-item-type2" >
                                            <div class="layui-btn-group media-btn" >
                                                <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','video')"
                                                   class="layui-btn layui-btn-primary layui-btn-sm" >
                                                    <i class="layui-icon" ></i >选择
                                                </a >
                                            </div >
                                        </div >
                                    </div >

                                </div >
                                {/volist}
                            </div >
                        </div >
                        <div class="layui-tab-item voice" >
                            <div class="img-box" id="voice" >
                                <img src="__WECHAT__/images/add-img.png" alt="" style="height:auto;padding-top:40px" >
                                <div class="bottomBar" >点击选择</div >
                            </div >
                            <div class="layui-row" style="display: none" >
                                {volist name="materialGroup['voice']" id="vo"}
                                <div class="layui-col-md3" >
                                    <div class="media-body" >
                                        <div class="media-time" >
                                            发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                                        </div >
                                        <span style="display: block;" >
                                     <div class="media-content" >
                                         <div class="media-desc" >
                                             <p class="media-desc-sp" ></p >
                                         </div >
                                         <audio class="media-img" src="{$vo.media_url}" ></audio >
                                      </div >
                                </span >

                                        <div class="media-item-type2" >
                                            <div class="layui-btn-group media-btn" >
                                                <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','video')"
                                                   class="layui-btn layui-btn-primary layui-btn-sm" >
                                                    <i class="layui-icon" ></i >选择
                                                </a >
                                            </div >
                                        </div >
                                    </div >

                                </div >
                                {/volist}
                            </div >
                        </div >
                    </div >
                </div >

                <div class="layui-form-item" >
                    <div class="layui-input-block" >
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit" >立即发送</button >
                    </div >
                </div >
            </form >

        </div >
    </div >
</div >


<script >

    layui.use(['form', 'element', 'layer',"lucky"], function () {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer,
            lucky =layui.lucky,
            element = layui.element;
        var openid = '{$user.openid}';


        form.on('submit(submit)', function (data) {
            var type = '';
            if ($("input[name='msg_type']").val() == 'text' && !$("textarea[name='data']").val()) {
                layer.msg('请填写文本内容');
                return false;
            }
            data.field.openid = openid;
            lucky.FormSubmit("{:url('messageReply')}",data.field,"table_id",1);
            return false;
        });



        $('.img-box').click(function (e) {
            index = layer.open({
                type: 1,
                content: $(this).next('.layui-row'),
                area: ['800px', '600px'],
                anim: 2,
                maxmin: true,
            });
        })


    });

    function materialSelect(obj, id, type) {
        var src = $(obj).parents('.layui-tab-item').find('.media-img').attr('src');
        console.log(src);
        $("input[name='material_id']").val(id)
        $("input[name='msg_type']").val(type)
        $(obj).parents('.layui-tab-item').find('.img-box').find('img').attr('src', src);
        layer.close(index);

    }

</script >

{/block}